<style include="settings-shared md-select">
  .text-area {
    margin-inline-end: 24px;
  }

  select.md-select {
    min-width: 200px;
  }

  cr-policy-pref-indicator {
    margin-inline-end: var(--cr-controlled-by-spacing);
  }
</style>
<settings-toggle-button id="google-assistant-enable"
    class="primary-toggle"
    pref="{{prefs.settings.voice_interaction.enabled}}"
    label="[[getAssistantOnOffLabel_(
        prefs.settings.voice_interaction.enabled.value)]]"
    disabled="{{prefs.settings.assistant.disabled_by_policy.value}}"
    aria-label="$i18n{searchGoogleAssistantOn}"
    deep-link-focus-id$="[[Setting.kAssistantOnOff]]">
</settings-toggle-button>
<template is="dom-if"
    if="[[prefs.settings.voice_interaction.enabled.value]]">
  <settings-toggle-button id="google-assistant-context-enable"
      class="hr"
      pref="{{prefs.settings.voice_interaction.context.enabled}}"
      label="$i18n{googleAssistantEnableContext}"
      sub-label="$i18n{googleAssistantEnableContextDescription}"
      deep-link-focus-id$="[[Setting.kAssistantRelatedInfo]]">
  </settings-toggle-button>
  <template is="dom-if" if="[[hotwordDspAvailable_]]" restamp>
    <settings-toggle-button id="google-assistant-hotword-enable"
        class="hr"
        pref="{{prefs.settings.voice_interaction.hotword.enabled}}"
        label="$i18n{googleAssistantEnableHotword}"
        sub-label="$i18n{googleAssistantEnableHotwordDescription}"
        on-settings-boolean-control-change="onEnableHotwordChange_"
        disabled="[[hotwordEnforcedForChild_]]"
        deep-link-focus-id$="[[Setting.kAssistantOkGoogle]]">
    </settings-toggle-button>
  </template>
  <template is="dom-if" if="[[!hotwordDspAvailable_]]" restamp>
    <div class="settings-box" id="dsp-hotword-container">
      <div class="start text-area settings-box-text" aria-hidden="true">
        <div class="label" id="googleAssistantEnableHotword">
          $i18n{googleAssistantEnableHotword}
        </div>
        <div class="secondary label"
            id="googleAssistantEnableHotwordDescription">
          $i18n{googleAssistantEnableHotwordWithoutDspDescription}
        </div>
      </div>
      <template is="dom-if" if="[[hotwordEnforced_]]" restamp>
        <cr-policy-pref-indicator id="hotword-policy-pref-indicator"
            pref="{{prefs.settings.voice_interaction.hotword.enabled}}">
        </cr-policy-pref-indicator>
      </template>
      <!-- We don't use the settings_dropdown_menu for the dspHotwordState
           drop down, because the dspHotwordState manages 2 preferences.
       <select id="dsp-hotword-state" class="md-select"
       The settings_dropdown_menu is designed to manage only a single
       preference. -->
      <select id="dsp-hotword-state" class="md-select"
          aria-labelledby="googleAssistantEnableHotword"
          aria-describedby="googleAssistantEnableHotwordDescription"
          on-change="onDspHotwordStateChange_"
          disabled="[[hotwordEnforced_]]"
          deep-link-focus-id$="[[Setting.kAssistantOkGoogle]]">
        <template is="dom-repeat" items="[[hotwordDropdownList_]]">
          <option value="[[item.value]]"
              selected="[[isDspHotwordStateMatch_(item.value)]]">
            [[item.name]]
          </option>
        </template>
      </select>
    </div>
  </template>
  <template is="dom-if" if="[[shouldShowVoiceMatchSettings_]]">
    <div class="settings-box continuation embedded">
      <div class="start text-area settings-box-text">
        <div class="label">
          $i18n{googleAssistantVoiceSettings}
        </div>
        <div class="secondary label">
          $i18n{googleAssistantVoiceSettingsDescription}
        </div>
      </div>
      <controlled-button id="retrain-voice-model"
          on-click="onRetrainVoiceModelTapped_"
          label="$i18n{googleAssistantVoiceSettingsRetrainButton}"
          pref="{{prefs.settings.voice_interaction.hotword.enabled}}"
          deep-link-focus-id$="[[Setting.kTrainAssistantVoiceModel]]">
      </controlled-button>
    </div>
  </template>
  <settings-toggle-button id="google-assistant-notification-enable"
      class="hr"
      pref="{{prefs.settings.voice_interaction.notification.enabled}}"
      label="$i18n{googleAssistantEnableNotification}"
      sub-label="$i18n{googleAssistantEnableNotificationDescription}"
      deep-link-focus-id$="[[Setting.kAssistantNotifications]]">
  </settings-toggle-button>
  <settings-toggle-button id="google-assistant-launch-with-mic-open"
      class="hr"
      pref="{{prefs.settings.voice_interaction.launch_with_mic_open}}"
      label="$i18n{googleAssistantLaunchWithMicOpen}"
      sub-label="$i18n{googleAssistantLaunchWithMicOpenDescription}"
      deep-link-focus-id$="[[Setting.kAssistantVoiceInput]]">
  </settings-toggle-button>
  <cr-link-row id="google-assistant-settings" class="hr"
      on-click="onGoogleAssistantSettingsTapped_"
      label="$i18n{googleAssistantSettings}" external></cr-link-row>
</template>
